import React, { Component, Fragment, useState } from "react";
import { Layout } from 'antd';
import Head from '../../common/header';
import { HomeOutlined, CloseSquareOutlined } from '@ant-design/icons';
import { connect, useSelector, useDispatch } from "react-redux";
import * as actionCreator from "./store/actionCreator";
import './index.css';
const { Content } = Layout;

const Money = () => {
    const [show1, setShow1] = useState(false);
    const [time, setTime] = useState('');
    const [useId, setUseId] = useState(0);
    const [billShow, setBillShow] = useState(false);
    const [successShow, setSuccessShow] = useState(false);
    const dispatch = useDispatch();
    const roomList = useSelector((state) => {
        return state.app.roomList;
    })
    const renewTime = (id, time) => {
        dispatch(actionCreator.addTime(id, time))
    }
    const setBalance = (id) => {
        dispatch(actionCreator.setBalance(id))
    }

    const handleChangeTime = (e) => {
        setTime(e.target.value);
    }
    const handleOpenRenew = (id) => {
        setShow1(true);
        setUseId(id);
    }
    const handleCloseRenew = () => {
        setShow1(false);
    }
    const handleConfirm = (id, time) => {
        if (time === '') {
            alert('输入不能为空!')
            return;
        }
        renewTime(id, time)
        setShow1(false);
        setTime('');
    }
    const handleOpenBalance = (id) => {
        setBillShow(true);
        setUseId(id);
    }
    const handleCloseBalance = () => {
        setBillShow(false);
    }
    const handleBalance = () => {
        setBillShow(false);
        setSuccessShow(true);
        setBalance(useId);
        setInterval(() => {
            setSuccessShow(false);
        }, 600)
    }
    return (
        <Fragment>
            <Head />
            <Content style={{ padding: '10px 50px' }}>
                <div className="site-layout-content" style={{ display: 'flex', flexDirection: 'column' }}>
                    {roomList.map((item) => {
                        if (item.used) {
                            return (
                                <div className="money-item-container" key={item.id}>
                                    <HomeOutlined className="money-item-icon" />
                                    <span className="money-item-room">{item.number}</span>
                                    <span className="money-item-room">住户:{item.name}</span>
                                    <span className="money-item-room">住户电话:{item.phone}</span>
                                    <span className="money-item-room">剩余时长:{item.time}</span>
                                    <button className="money-item-button" style={{ background: 'red' }} onClick={() => handleOpenBalance(item.id)}>结账</button>
                                    <button className="money-item-button" style={{ background: 'green' }} onClick={() => handleOpenRenew(item.id)}>续时</button>
                                </div>
                            )
                        }
                    })}
                </div>
                {show1 ? <div className="money-renew-container">
                    <CloseSquareOutlined className="money-renew-close" onClick={handleCloseRenew} />
                    <div className="money-renew-time">
                        <span className="money-renew-text">续时时长:</span>
                        <input type='text' className="money-renew-input" value={time} onChange={(e) => handleChangeTime(e)} />
                    </div>
                    <button className="money-renew-button" onClick={() => handleConfirm(useId, time)}>确定</button>
                </div> : ''}
                {billShow ? <div className="money-bill-container">
                    <CloseSquareOutlined className="money-bill-close" onClick={handleCloseBalance} />
                    <div className="money-bill-balance">卡上余额:{roomList[useId - 1].time * 20}</div>
                    <div className="money-bill-button-container">
                        <button className="money-bill-button" style={{ marginRight: '8px' }} onClick={handleBalance}>结账</button>
                        <button className="money-bill-button" style={{ marginLeft: '8px' }} onClick={handleCloseBalance}>取消</button>
                    </div>
                </div> : ''}
                {successShow ? <div className="money-success-container">
                    <div className="money-success-text">结账成功！</div>
                </div> : ''}
            </Content>
        </Fragment>
    )
}

// class Money extends Component{
//     constructor(props){
//         super(props);
//         this.state = {
//             show1: false,
//             time: '',
//             useId: 0,
//             billShow: false,
//             successShow: false
//         }
//         this.handleChangeTime = this.handleChangeTime.bind(this);
//         this.handleOpenRenew = this.handleOpenRenew.bind(this);
//         this.handleCloseRenew = this.handleCloseRenew.bind(this);
//         this.handleConfirm = this.handleConfirm.bind(this);
//         this.handleOpenBalance = this.handleOpenBalance.bind(this);
//         this.handleCloseBalance = this.handleCloseBalance.bind(this);
//         this.handleBalance = this.handleBalance.bind(this);
//         this.test = this.test.bind(this);
//     }
//     render(){
//         const { show1,time,useId,billShow,successShow } = this.state;
//         const { roomList } = this.props;
//         return(
//             <Fragment>
//                 <Head/>
//                 <Content style={{ padding: '10px 50px' }}>
//                     <div className="site-layout-content" style={{display:'flex',flexDirection:'column'}}>
//                         {roomList.map((item)=>{
//                             if(item.used){
//                                 return(
//                                     <div className="money-item-container" key={item.id}>
//                                         <HomeOutlined className="money-item-icon"/>
//                                         <span className="money-item-room">{item.number}</span>
//                                         <span className="money-item-room">住户:{item.name}</span>
//                                         <span className="money-item-room">住户电话:{item.phone}</span>
//                                         <span className="money-item-room">剩余时长:{item.time}</span>
//                                         <button className="money-item-button" style={{background:'red'}} onClick={()=>this.handleOpenBalance(item.id)}>结账</button>
//                                         <button className="money-item-button" style={{background:'green'}} onClick={()=>this.handleOpenRenew(item.id)}>续时</button>
//                                     </div>
//                                 )
//                             }
//                         })}
//                     </div>
//                     {show1?<div className="money-renew-container">
//                         <CloseSquareOutlined className="money-renew-close" onClick={this.handleCloseRenew}/>
//                         <div className="money-renew-time">
//                             <span className="money-renew-text">续时时长:</span>
//                             <input type='text' className="money-renew-input" value={time} onChange={(e)=>this.handleChangeTime(e)}/>
//                         </div>
//                         <button className="money-renew-button" onClick={()=>this.handleConfirm(useId,time)}>确定</button>
//                     </div>:''}
//                     {billShow?<div className="money-bill-container">
//                         <CloseSquareOutlined className="money-bill-close" onClick={this.handleCloseBalance}/>
//                         <div className="money-bill-balance">卡上余额:{roomList[useId-1].time*20}</div>
//                         <div className="money-bill-button-container">
//                             <button className="money-bill-button" style={{marginRight:'8px'}} onClick={this.handleBalance}>结账</button>
//                             <button className="money-bill-button" style={{marginLeft:'8px'}} onClick={this.handleCloseBalance}>取消</button>
//                         </div>
//                     </div>:''}
//                     {successShow?<div className="money-success-container">
//                         <div className="money-success-text">结账成功！</div>
//                     </div>:''}
//                 </Content> 
//             </Fragment>
//         )
//     }
//     handleChangeTime(e){
//         this.setState({time:e.target.value})
//     }
//     handleOpenRenew(id){
//         this.setState({show1:true,useId:id})
//     }
//     handleCloseRenew(){
//         this.setState({show1:false})
//     }
//     handleConfirm(id,time){
//         this.props.renewTime(id,time)
//         this.setState({show1:false,time:''})
//     }
//     handleOpenBalance(id){
//         this.setState({billShow:true,useId:id})
//     }
//     handleCloseBalance(){
//         this.setState({billShow:false})
//     }
//     handleBalance(){
//         this.setState({billShow:false,successShow:true},()=>{
//             this.props.setBalance(this.state.useId);
//             setInterval(()=>{
//                 this.setState({successShow:false})
//             },300)
//         })
//     }
//     test(){

//     }
// }
const mapStateToProps = (state) => ({
    roomList: state.app.roomList
})
const mapDispatchToProps = (dispatch) => ({
    renewTime(id, time) {
        dispatch(actionCreator.addTime(id, time))
    },
    setBalance(id) {
        dispatch(actionCreator.setBalance(id))
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(Money);